<template>
    <RouterView></RouterView>
    <div>
        <input type="text" placeholder="请输入id进行跳转" v-model="res">
    </div>  
    <button @click="btn">跳转到child1</button>
    <button @click="btn1">跳转到child2</button>
    
    </template>
    <script setup>
    import {ref} from "vue"
    import {useRouter}  from "vue-router"
    let res=ref("")
    let router=new useRouter()
    let btn=function () {
        router.push(`/parent/${res}/child1`)
    }
    let btn1=function () {
        router.push(`/parent/${res}/child1`)
    }
    </script>


<!-- 创建基本路由

使用 Vue 3 和 Vue Router 创建一个简单的单页面应用，包含两个页面：Home 和 About。
要求：
使用 vue-router 的最新版本。
在 Home 页面显示“欢迎来到首页！”的文本。
在 About 页面显示“这是关于页面！”的文本。
使用 <router-link> 实现页面之间的导航。
提示：参考 Vue Router 的基本安装和配置方法。 -->



<!-- 动态路由匹配

在上述基础上，添加一个动态路由 /user/:id，用于显示用户信息。
要求：
创建一个名为 User 的组件。
在 User 组件中，通过 $route.params.id 获取动态参数，并在页面上显示“用户ID为：[id]”。
在 Home 页面添加一个按钮，点击后跳转到 /user/123。
提示：动态路由的定义格式为 path: '/user/:id'。 -->


<!-- 在 About 页面中添加两个子页面：About/Team 和 About/History。
要求：
在 About 组件中使用 <router-view> 渲染子页面。
在 About/Team 页面显示“这是团队页面！”。
在 About/History 页面显示“这是历史页面！”。
在 About 页面添加两个链接，分别跳转到 About/Team 和 About/History。
提示：嵌套路由的配置需要在父路由的 children 属性中定义子路由。 -->


<!-- 
在项目中添加全局路由守卫，实现以下功能：
当用户访问 /about 页面时，弹出一个确认框，询问用户是否继续。
如果用户点击“确定”，则允许访问；如果点击“取消”，则取消导航。
要求：
使用 router.beforeEach 全局前置守卫。
在确认框中显示“确定要访问关于页面吗？”。
提示：全局前置守卫的回调函数参数为 (to, from, next)，其中 next 用于控制导航是否继续。
 -->




<!-- 
 实现简单的嵌套路由
任务描述：创建一个 Vue 3 项目，包含一个父路由和两个子路由。父路由的路径为 /parent，子路由分别为 /child1 和 /child2。父路由组件中显示一个导航栏，点击导航栏的链接可以切换到对应的子路由组件。

要求：

使用 Vue Router 4 配置嵌套路由。
父路由组件中显示一个导航栏，导航栏包含两个链接，分别指向 /parent/child1 和 /parent/child2。
子路由组件中分别显示不同的内容。
提示：

在路由配置中定义嵌套路由。
使用 <router-link> 实现导航链接。
使用 <router-view> 显示子路由组件。 -->

<!-- 题目2：动态嵌套路由
任务描述：在上一题的基础上，将子路由的路径改为动态路径，例如 /parent/:id，并通过路由参数传递数据。

要求：

修改路由配置，将子路由路径改为动态路径。
在父路由组件中添加一个输入框，用户输入的值作为子路由的参数。
在子路由组件中显示传递的参数。
提示：
使用动态路由匹配。
在子路由组件中通过 this.$route.params 获取参数。 -->